/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useEffect } from "react";
import { useDispatch } from "dva";
import { Modal, message } from "antd";
import StandardTable from "@/components/StandardTable";
import { brandsMap_name } from "@/utils/utils";

const QuoteModal = props => {
  const dispatch = useDispatch();
  const { data: originList } = props;
  const [quoteList, setQuoteList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [selectedRowsKeys, setSelectedRowsKeys] = useState([]);
  const [okButtonDisabled, setokButtonDisabled] = useState(true);
  const columns = [
    {
      title: "报价单名称",
      dataIndex: "name",
      key: "name",
      align: "center",
      render: val => <a>{val}</a>,
    },
    {
      title: "快递品牌",
      dataIndex: "brand",
      key: "brand",
      align: "center",
      render: val => brandsMap_name(val),
    },
    {
      title: "报价单模式",
      dataIndex: "id",
      key: "id",
      align: "center",
      render: () => <div>首重 / 续重</div>,
    },
  ];
  useEffect(
    () => {
      if (originList) {
        setSelectedRowsKeys(originList.map(item => item.id));
        dispatch({
          type: "order_finance/getQuoteList",
          payload: {
            page: 1,
          },
        }).then(({ code, data }) => {
          if (code === 0) {
            setVisible(true);
            setQuoteList(data?.list || []);
          }
        });
      } else {
        setVisible(false);
      }
    },
    [originList, dispatch]
  );

  const handleClose = () => {
    props.onClose(null);
  };
  const handleOk = () => {
    props.modalSubmit({
      id: selectedRowsKeys.join(","),
    });
  };

  const onSelectRowChange = (selectedRowKeys, selectedRows, then) => {
    let repeatBrand;
    if (selectedRows.length) {
      repeatBrand = selectedRows
        .map(item => item.brand)
        .reduce((pre, next) => `${pre},${next}`)
        .split(",")
        .filter((item, index, arr) => arr.indexOf(item) !== index)
        .toString();
    }
    const isCanuse = !repeatBrand;
    if (isCanuse) {
      then(selectedRowKeys, selectedRows);
      setSelectedRowsKeys(selectedRowKeys);
    } else {
      message.error(`${brandsMap_name(repeatBrand)}  已经存在报价单`, 2);
    }
  };

  /**
   * 设置提交按钮状态
   * 原有列表中包含已拒绝 || 对现有列表操作了编辑
   */
  useEffect(
    () => {
      const isDisabledButton =
        originList?.length == selectedRowsKeys.length &&
        originList?.every(item => selectedRowsKeys.includes(item.id));
      const agreeKeys = ["1", "2"];
      if (isDisabledButton) {
        setokButtonDisabled(originList?.every(item => agreeKeys.includes(item.leaguer_status)));
      } else {
        setokButtonDisabled(false);
      }
    },
    [originList, selectedRowsKeys]
  );
  return (
    <Modal
      title="给驿站设置报价单"
      centered
      visible={visible}
      onCancel={handleClose}
      maskClosable
      onOk={handleOk}
      destroyOnClose
      width={700}
      okButtonProps={{ disabled: okButtonDisabled }}
    >
      <StandardTable
        rowKey={record => record.id}
        columns={columns}
        data={{ list: quoteList }}
        selectedRows
        defaultSelectedRowKeys={selectedRowsKeys}
        onSelectRowChange={onSelectRowChange}
      />
      <div style={{ marginTop: "20px" }}>注意：相同品牌的报价单，只能选择一个</div>
    </Modal>
  );
};

export default QuoteModal;
